<template>
	<view class="secret">
		<view class="notify-list">
			<view class="rowz" >
				<view class="carrierz">

						<camera class="camera" mode="scanCode" device-position="back" flash="off" @error="cameraError" @scancode="takeCode"
							frame-size="large"></camera>
						<cover-view class="animation" :animation="animation"></cover-view>
					
				</view>
			</view>
			<view class="row" >
				<view class="carrier">
					<view class="notify-wrapper" @click="zyqtest">
						<view class="title in3line">手动录入单号【点击提交】</view>
						<input type="text" name="name" placeholder="请输入单号" @input='nameInput'/>
						<view class="un-read" :class="'bg-'+themeColor.name"></view>
					</view>
				</view>
			</view>	
			<view class="row" v-for="(item, index) in smlist" :key="index">
				<view class="carrier">
					<view class="notify-wrapper">
						<view class="title in3line">单号:{{ item.dh }}<br>款号:{{ item.kh }}&nbsp;&nbsp;<br>颜色:{{ item.ys }}&nbsp;&nbsp;<br>尺码:{{ item.cm }}<br>状态:{{ item.nr }}</view>
						<!-- <view class="time">2020-12-12</view> -->
						<view class="un-read" :class="'bg-'+themeColor.name"></view>
					</view>
				</view>
			</view>	
		</view>
	</view>

</template>

<script>
	let animation = uni.createAnimation({});
	let innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.src = '/static/didi.wav';
	export default {
		data() {
			return {
				animation,
				smlist: [],
				dh:'',
			}
		},
		onShow() {
			this.initData();
			this.donghua()
		},
		methods: {
			// 数据初始化
			initData() {
				this.scanused = false;

				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},

			// 通用跳转
			async navTo(item) {
				this.$mRouter.push({
					route: `/pages/notice/detail?id=${item}`
				});
			},
			donghua() {
				let that = this;
				let scode = true
				setInterval(function() {
					if (scode) {
						animation.translateY(187).step({
							duration: 3000
						})
						scode = !scode;
					} else {
						animation.translateY(-10).step({
							duration: 3000
						})
						scode = !scode;
					}
						that.animation = animation.export()
					
				}.bind(this), 3000)
			},
			zyqtest() {
				if(!this.dh){
						return;
				}
				let totle=this.smlist.length;
				console.log(totle);
				console.log(this.dh);
				if(totle>5){
					console.log('totle大于5');
				this.smlist=[];
				}
				console.log(totle);
				//开始提交
				var that=this;
				console.log(that.dh);
				wx.request({
				  url:getApp().globalData.host+'api.php?',//请求地址
				  data:{//发送给后台的数据
				    m:"opensm",
				    a:"rk",
				    dh:that.dh,
					yh:uni.getStorageSync('zyqname'),
				  },
				  header:{//请求头
				    // "Content-Type":"applciation/json",
					"Content-Type":"text/html; charset=UTF-8",
				  },
				  method:"GET",//get为默认方法/POST
				  success:function(res){
					console.log("入库结果");
				    console.log(res.data);//res.data相当于ajax里面的data,为后台返回的数据	
					that.smlist.unshift({
						dh:  that.dh,
						kh: res.data.kh,
						ys: res.data.ys,
						cm:  res.data.cm,
						nr: res.data.zyqztwenben,
					})
					
				  },
				  fail:function(err){
					  console.log("入库失败");
							 
							 		 
						  },//请求失败
				  complete:function(){}//请求完成后执行的函数
				})
				//结束提交
			},
			nameInput(e) {
				this.dh = e.detail.value;
				console.log("单号:"+this.dh);
			},
			takeCode(e) {
				var time = new Date();
				console.log(time);
				
				
			    if (this.scanused==false){
			      this.scanused=true;
				  console.log(e.detail.result);
				  wx.vibrateShort({
				            type: 'heavy'
				          });
				  innerAudioContext.play();
			       uni.showToast({
			       		title: e.detail.result,
			       		duration:500
			       	})
					this.dh = e.detail.result;
					this.zyqtest();
					// this.smlist.unshift({
					// 	dh:  e.detail.result,
					// 	kh: '99-1',
					// 	ys: '白色',
					// 	cm: 'L'
					// })
					// this.setData({
					//   smlist: smlist,
					// })
					
			       	
			      }
			
			      setTimeout(()=>{this.scanused=false},4000);
			      //每隔两秒可以扫一次
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: $page-color-base;
	}
	.scanCode_box {
		top: 100rpx;
		width: 100%;
		height: 434rpx;
		display: flex;
		flex-direction: column;
		background-color: #333333;
		position: fixed;
		align-items: center;
		justify-content: space-around;
	}
	.camera {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
		margin: 0rpx;
	}
	.animation {
		position: absolute;
		left: 0rpx;
		width: 100%;
		height: 2rpx;
		background-color: #4CD964;
		border-radius: 50%;
	}

	.secret {
		.add-round {
			position: fixed;
			z-index: 999;
			right: 30rpx;
			bottom: 30rpx;
			border-radius: 50%;
			width: 120rpx;
			height: 120rpx;
			color: #fff;
			text-align: center;
			line-height: 120rpx;
			font-weight: 100;
			font-size: 80rpx;
		}

		.notify-list {
			margin-top: 20upx;

			.read {
				text-align: right;
				margin-right: $spacing-base;
				margin-top: $spacing-base;
				margin-bottom: $spacing-sm;

				text {
					margin-left: $spacing-base;
				}
			}
			.rowz {
				width: calc(94%);
				height: calc(50vw);
				margin: 0 auto $spacing-base;
				border-radius: 15upx;
				box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				position: relative;
				overflow: hidden;
				z-index: 4;
				border: 0;
			
				.menuz {
					.iconfont {
						color: #fff;
						font-size: 60upx;
					}
			
					position: absolute;
					width: 29%;
					height: 100%;
					right: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					z-index: 2;
				}
			
				.carrierz {
					@keyframes showMenu {
						0% {
							transform: translateX(0);
						}
			
						100% {
							transform: translateX(-30%);
						}
					}
			
					@keyframes closeMenu {
						0% {
							transform: translateX(-30%);
						}
			
						100% {
							transform: translateX(0);
						}
					}
			
					&.open {
						animation: showMenu 0.25s linear both;
					}
			
					&.close {
						animation: closeMenu 0.15s linear both;
					}
			
					background-color: #fff;
					position: absolute;
					width: 100%;
					padding: 0 0;
					height: 100%;
					z-index: 3;
					display: flex;
					align-items: center;
				}
			}

			.row {
				width: calc(94%);
				height: calc(40vw);
				margin: 0 auto $spacing-base;
				border-radius: 15upx;
				box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				position: relative;
				overflow: hidden;
				z-index: 4;
				border: 0;

				.menu {
					.iconfont {
						color: #fff;
						font-size: 60upx;
					}

					position: absolute;
					width: 29%;
					height: 100%;
					right: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					z-index: 2;
				}

				.carrier {
					@keyframes showMenu {
						0% {
							transform: translateX(0);
						}

						100% {
							transform: translateX(-30%);
						}
					}

					@keyframes closeMenu {
						0% {
							transform: translateX(-30%);
						}

						100% {
							transform: translateX(0);
						}
					}

					&.open {
						animation: showMenu 0.25s linear both;
					}

					&.close {
						animation: closeMenu 0.15s linear both;
					}

					background-color: #fff;
					position: absolute;
					width: 100%;
					padding: 0 0;
					height: 100%;
					z-index: 3;
					display: flex;
					align-items: center;
				}
			}

			.notify-wrapper {
				background-color: $color-white;
				width: 100%;
				padding: $spacing-base $spacing-lg $spacing-base $spacing-lg;
				margin: $spacing-base 0 0;
				border-radius: 15upx;
				position: relative;

				.title {
					font-size: $font-lg;
					color: $font-color-dark;
					font-weight: 500;
					margin: 0 0 $spacing-sm;
				}

				.content {
					font-size: $font-sm;
					color: $font-color-base;
					height: 75upx;
					line-height: 36upx;
				}

				.time {
					font-size: $font-base;
					color: $font-color-light;
				}

				.type {
					position: absolute;
					top: 26upx;
					left: -10upx;
					border: none;
					font-size: $font-sm;
					opacity: 0.8;
				}

				.un-read {
					display: inline-block;
					width: 12upx;
					height: 12upx;
					border-radius: 50%;
					position: absolute;
					top: 32upx;
					right: 30upx;
				}
			}
		}

		.notify-empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			padding-bottom: 100upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			.iconfont {
				font-size: $font-lg + 100upx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm + 2upx;
				color: $font-color-disabled;

				.navigator {
					margin-left: 16upx;
				}
			}
		}
	}
</style>
